<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
	
	<script src="${ctx}/js/controllers/mall/goodsCategory/CategoryAttrListController.js" type="text/javascript"></script>
			<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
		
		//实现选中取消切换图片
		$("tbody td>img").toggle(function(){    
		    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
		    //$(this).parents("tr").children().each(function(){
			   // $(this).css("background","#D3F0F1");
		   //});    
		},function(){    
		    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
		    //$(this).parents("tr").children().each(function(){
			    //$(this).css("background","");
		   //});
		    });
		    
		//实现全选切换所有选项图标
		$("#all").toggle(function(){    
		    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
		    $("tbody td>img").attr("src","${ctx }/images/tables/honggou.png");  
		},function(){    
		    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
		    $("tbody td>img").attr("src","${ctx }/images/tables/wugou.png");  
		    });
		
		
		//新增或编辑用户(1:新增 2:编辑)
		function saveOrUpdateValue (attrId) {
			if(attrId != null){
				msg = "编辑商品分类属性值";
				url =  ctx + "/goodsCategory/attrValueEdit?id="+attrId+"";
				saveOrUpdateValueBox(msg,url);
			}
			
		}
		
		
		//新增或编辑用户(1:新增 2:编辑)
		function saveOrUpdate (attrId) {
			var categoryId = $("#categoryId").val();
			if(attrId != null){
				msg = "编辑商品分类属性";
				url =  ctx + "/goodsCategory/categoryAttrEdit?id="+attrId+"&categoryId=" + categoryId;
				saveOrUpdateBox(msg,url);
			}else{
				
				msg = "新增商品分类属性";
				url =  ctx + "/goodsCategory/categoryAttrEdit?id=0" + "&categoryId=" + categoryId;
				saveOrUpdateBox(msg,url);
			}
			
		}
		
		

		var index;
		function saveOrUpdateBox(msg,url){
		  //官网欢迎页
		   index = layer.open({
		      type: 2,
		      //skin: 'layui-layer-lan',
		      title: msg,
		      fix: false,
		      shadeClose: true,
		      scrollbar: false,
		      maxmin: false,
		      edit: true,
		      closeBtn: 1,
		      area: ['500px', '212px'],
		      content: url,
		      btn: ['确定', '取消']
			    ,yes: function(index, layero){ //或者使用btn1
			        //按钮【按钮一】的回调
			    	var iframeWin = window[layero.find('iframe')[0]['name']]; 
			    	iframeWin.saveOrUpdateAttr();

			    },cancel: function(index){ //或者使用btn2
			        //按钮【按钮二】的回调
			    }
			    });
		}

		var index;
		function saveOrUpdateValueBox(msg,url){
		  //官网欢迎页
		   index = layer.open({
		      type: 2,
		      //skin: 'layui-layer-lan',
		      title: msg,
		      fix: false,
		      shadeClose: true,
		      scrollbar: false,
		      maxmin: false,
		      edit: true,
		      closeBtn: 1,
		      area: ['500px', '400px'],
		      content: url,
		      btn: ['确定', '取消']
			    ,yes: function(index, layero){ //或者使用btn1
			        //按钮【按钮一】的回调
			    	var iframeWin = window[layero.find('iframe')[0]['name']]; 
			    	iframeWin.saveOrUpdateAttrValue();

			    },cancel: function(index){ //或者使用btn2
			        //按钮【按钮二】的回调
			    }
			    });
		}
		
		//全选和反选
		function selectAll(target){    
		    if(target.checked){    
		        $("#tableTbody :checkbox").attr("checked", true); 
		        $(target).parents("thead").siblings("tbody").children().children().each(function(){
		    	    $(this).css("background","#D3F0F1");
		       });
		    }else{    
		        $("#tableTbody :checkbox").attr("checked", false); 
		        $(target).parents("thead").siblings("tbody").children().children().each(function(){
		    	    $(this).css("background","");
		       });
		    }    

		}

		//鼠标滑入一行改变背景颜色
		function mouseoverOne(target){
			 $(target).children().each(function(){
				  	    $(this).css("background","#D3F0F1");
				     });
		}

		//鼠标滑出一行恢复原来的背景颜色
		function mouseoutOne(target){
			 $(target).children().each(function(){
			  	    $(this).css("background","");
			     });
		}
		
		function deleteByIds(){
			if($("img[name='attrChecked'][src*=honggou]").length == 0){
				layer.msg("请选择要删除的记录!",{
					icon:3,
					time:2000
				});
			}else{
				var delIds = [];
				    $("#tableTbody img[name='attrChecked'][src*=honggou]").each(function(){ 
				    	delIds.push($(this).attr("class")); 
				    }); 
				    var vals = delIds.join(',');//转换为逗号隔开的字符串 
					layer.confirm('确认删除?', {icon: 3, title:'提示'}, function(index){
					    //do something
						$.post(ctx+"/goodsCategory/deleteAttr",{
							attrIDs:vals
						},function(data){
							data = JSON.parse(data);
							if(data.success){
								layer.msg("删除成功",{
									icon: 1,
									time: 2000 //2秒关闭（如果不配置，默认是3秒）
								},function(){
									loadContent("/goodsCategory/categoryList");
								});
							} else {
								layer.msg(data.msg,{
									icon: 2,
									time: 2000 //2秒关闭（如果不配置，默认是3秒）
								});
							}
						});
					    layer.close(index);
					});

				
			}
		}
	</script>
				<div class="modal-header">
					<h4 class="modal-title" style="float:left;">分类属性详情</h4>
					<a style="float:right;padding-right: 20px;line-height: 40px;color:#fff;" title="删除分类属性" onclick="deleteByIds();">删除</a>
					<a style="float:right;padding-right: 5px;line-height: 40px;color:#fff;" title="新增分类属性" onclick="saveOrUpdate();">新增&nbsp;&nbsp;|&nbsp;</a>
				</div>
                <input id="categoryId" type="hidden" value="${categoryId }">
                <table style="width:100%; margin-top:0px;table-layout:fixed" class="table table-striped b-t b-light">
                	<thead>
                      <tr>
                      	<td width="5%" style="background-color: #e0eff3;height:40px">
                           <img id="all" type="checkbox" onclick="selectAll(this)" src="${ctx }/images/tables/wugou.png" style="margin-bottom: 1px;">
                        </td>
                        <td width="10%" style="background-color: #e0eff3;height:40px">序号</td>
                        <td width="10%" style="background-color: #e0eff3;height:40px">分类名称</td>
                        <td width="10%" style="background-color: #e0eff3;height:40px">属性名称</td>
                        <td width="10%" style="background-color: #e0eff3;height:40px">操作</td>
                      </tr>
                     <thead>
                  	<tbody id="tableTbody">
                      	<c:forEach items="${categoryAttrList}" var="attr" varStatus="attrStatus">
	                      <tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
	                      	<td>
	                      	<img id="attr${cellInfo.id}" name="attrChecked" class="${attr.id}" onclick="selectOne('${attr.id}',this)" src="${ctx }/images/tables/wugou.png">
	                      	</td>
	                        <td>${attrStatus.index + 1 }</td>
	                        <td>${attr.categoryName}</td>
	                        <td>${attr.name}</td>
	                        <td >
	                        	<c:if test="${attr.inputType == 1 }">
			                          <a class="fa fa-check " onclick="saveOrUpdate('${attr.id}');">编辑&nbsp;&nbsp;|&nbsp;</a>
			                          <a class="fa fa-check " onclick="saveOrUpdateValue('${attr.id}');">属性值</a>
	                        	</c:if>
	                        	<c:if test="${attr.inputType != 1}">
	                        		  <a class="fa fa-check " onclick="saveOrUpdate('${attr.id}');">编辑</a>
	                        	</c:if>
	                        </td>
	                      </tr>
                      	</c:forEach>
                     </tbody>
                            
                                      
                  </table>